<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
		<!-- 可选的Bootstrap主题文件（一般不用引入） -->
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
		
		<style type="text/css">
			body{
				padding-top: 50px;
			}
		</style>
	</head>
	<script>
		onload = function(){
			var postbtn = document.getElementById("postBtn");
			var tab = document.getElementById("table_data");
			var emailinput = document.getElementById("exampleInputEmail1");
			var pwdinput = document.getElementById("exampleInputPassword1");
			
			tab.addEventListener("click", function(e){
				if( e.target.getAttribute("role") == "delete"){
					e.target.parentNode.parentNode.remove();
				}
			});
			
			tab.addEventListener("click", function(e){
				if( e.target.getAttribute("role") == "data"){
					var oInput = document.createElement("input");
					oInput.type = "text";
					oInput.className = "form-control";
					oInput.value = e.target.innerText;
					e.target.innerText = "";
					e.target.appendChild(oInput);
					
					oInput.onblur = function(){
						oInput.parentNode.innerHTML = oInput.value;
					}
				}
			});
			
			postbtn.addEventListener("click", function(e){
				e.preventDefault();
				var email = emailinput.value;
				var pwd = pwdinput.value;
				var tr = document.createElement("tr");
				
				var td01 = document.createElement("td");
				td01.innerText = 1;
				var td02 = document.createElement("td");
				td02.innerText = email;
				td02.setAttribute("role","data");
				
				var td03 = document.createElement("td");
				td03.innerText = pwd;
				td03.setAttribute("role","data");
				
				var td04 = document.createElement("td");
				
				var delbtn = document.createElement("button");
				delbtn.className = "btn btn-danger btn-xs";
				delbtn.innerText = "删除";
				delbtn.setAttribute("role", "delete");
				
				
				td04.appendChild(delbtn);
				tr.appendChild(td01);
				tr.appendChild(td02);
				tr.appendChild(td03);
				tr.appendChild(td04);
				tab.children[0].appendChild(tr);
			});
		}
	</script>
	<body>
		<div style="margin:auto;width:500px">
			<form>
			  <div class="form-group">
				<label>Email address</label>
				<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
			  </div>
			  <div class="form-group">
				<label>Password</label>
				<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
			  </div>
			  <button type="submit" id="postBtn" class="btn btn-default btn-success">Submit</button>
			</form>
			<hr>
			<table id="table_data" class="table table-hover">
				<tr>
				  <td class="warning">ID</td>
				  <td class="active">Email</td>
				  <td class="success">User name</td>
				  <td class="danger">operation</td>
				</tr>
				<tr>
				  <td>ID</td>
				  <td>Email</td>
				  <td>User name</td>
				  <td>
					<button class="btn btn-danger btn-xs" href="#" role="delete">删除</button>
				  </td>
				</tr>
			</table>
		</div>
	</body>
</html>
